/* 获取元素 */
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slidesLength = slideRight.querySelectorAll("div").length;
/* 初始值 */
let activeSlideIndex = 0;
/* slideLeft初始的位置 */
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
/* 上按钮的点击事件 */
upButton.addEventListener("click", () => changeSlide("up"));
/* 下按钮的点击事件 */
downButton.addEventListener("click", () => changeSlide("down"));

const changeSlide = (direction) => {
  /* 获取视口的高度 */
  const sliderHeight = sliderContainer.clientHeight;

  if (direction === "up") {
    /* 如果点击的是上按钮 */
    /* 累加 */
    activeSlideIndex++;
    /* 如果到到达了最后一个就将activeSlideIndex置为0 */
    if (activeSlideIndex > slidesLength - 1) {
      activeSlideIndex = 0;
    }
  } else if (direction === "down") {
    /* 点击的是下按钮 */
    activeSlideIndex--;
    /* 小于了0 */
    if (activeSlideIndex < 0) {
      /* 从最后一个开始 */
      activeSlideIndex = slidesLength - 1;
    }
  }
  /* slideRight元素在y轴上平移 点击的次数*视口的高度*/
  slideRight.style.transform = `translateY(-${
    activeSlideIndex * sliderHeight
  }px)`;
  /* slideLeft元素在y轴上平移 点击的次数*视口的高度*/
  slideLeft.style.transform = `translateY(${
    activeSlideIndex * sliderHeight
  }px)`;
};
